import React, { useReducer, useState } from 'react';
import { Card, Input, Button, List, Tag, Space } from 'antd';
import { DeleteOutlined, CheckOutlined } from '@ant-design/icons';

// 定义Todo项接口
interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

// 定义Action类型
type TodoAction =
    | { type: 'ADD_TODO'; payload: string }
    | { type: 'TOGGLE_TODO'; payload: number }
    | { type: 'DELETE_TODO'; payload: number }
    | { type: 'CLEAR_COMPLETED' };

// 定义reducer函数
const todoReducer = (state: Todo[], action: TodoAction): Todo[] => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                {
                    id: Date.now(),
                    text: action.payload,
                    completed: false
                }
            ];
        case 'TOGGLE_TODO':
            return state.map(todo =>
                todo.id === action.payload
                    ? { ...todo, completed: !todo.completed }
                    : todo
            );
        case 'DELETE_TODO':
            return state.filter(todo => todo.id !== action.payload);
        case 'CLEAR_COMPLETED':
            return state.filter(todo => !todo.completed);
        default:
            return state;
    }
};

const TodoReducer: React.FC = () => {
    const [todos, dispatch] = useReducer(todoReducer, []);
    const [input, setInput] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (input.trim()) {
            dispatch({ type: 'ADD_TODO', payload: input.trim() });
            setInput('');
        }
    };

    return (
        <Card title="Todo List (useReducer示例)" style={{ marginBottom: 16 }}>
            <Space direction="vertical" style={{ width: '100%' }}>
                <form onSubmit={handleSubmit} style={{ display: 'flex', gap: 8 }}>
                    <Input
                        value={input}
                        onChange={e => setInput(e.target.value)}
                        placeholder="输入新的待办事项"
                    />
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </form>

                <List
                    itemLayout="horizontal"
                    dataSource={todos}
                    renderItem={todo => (
                        <List.Item
                            actions={[
                                <Button
                                    type="text"
                                    icon={<CheckOutlined />}
                                    onClick={() => dispatch({
                                        type: 'TOGGLE_TODO',
                                        payload: todo.id
                                    })}
                                />,
                                <Button
                                    type="text"
                                    danger
                                    icon={<DeleteOutlined />}
                                    onClick={() => dispatch({
                                        type: 'DELETE_TODO',
                                        payload: todo.id
                                    })}
                                />
                            ]}
                        >
                            <Space>
                                <span style={{
                                    textDecoration: todo.completed ? 'line-through' : 'none'
                                }}>
                                    {todo.text}
                                </span>
                                {todo.completed && <Tag color="success">已完成</Tag>}
                            </Space>
                        </List.Item>
                    )}
                />

                {todos.length > 0 && (
                    <Button
                        onClick={() => dispatch({ type: 'CLEAR_COMPLETED' })}
                        danger
                    >
                        清除已完成
                    </Button>
                )}

                <div>
                    <h4>说明：</h4>
                    <p>这是一个使用useReducer的Todo List示例：</p>
                    <ul>
                        <li>使用useReducer管理复杂状态</li>
                        <li>支持添加、切换状态、删除和清除已完成功能</li>
                        <li>展示了Action和Reducer的标准用法</li>
                    </ul>
                </div>
            </Space>
        </Card>
    );
};

export default TodoReducer; 